 
  

 






<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>

<!-- Mirrored from www.javapractices.com/topic/TopicAction.do?Id=202 by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 12 Jun 2011 17:28:07 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8"><!-- /Added by HTTrack -->
<head>
 <title>
  Java Practices -> Use Cascading Style Sheets
 </title>
 <link rel="stylesheet" type="text/css" href="../stylesheet8.css" media="all">
 
 <link rel="shortcut icon" href='../images/favicon.ico' type="image/vnd.microsoft.icon">
 <meta name="description" content="Concise presentations of java programming practices, tasks, and conventions, amply illustrated with syntax highlighted code examples.">
 
 <meta name='keywords' content='java,java programming,java practices,java idiom,java style,java design patterns,java coding conventions,'>
 
 
</head>
 
<body>


<div class='menu-bar'>
 
  <a href='../home/HomeAction.html' title='Table of Contents'>Home</a> |
  <a href='../vote/VoteSummaryAction-2.html' title='View Poll Results'>Poll</a> |
   
  <A href='../feedback/FeedbackAction451f-2.html?Operation=Show' title='Send Your Feedback'>Wiki</a> |
  <b><a href='../source/SourceAction-2.html' title='Grab Source Code'>Source Code</a></b><IMG class='no-margin' SRC="../images/goldstar.gif" ALT=""> |

  <a href='http://www.web4j.com/Java_Web_Application_Framework_Overview.jsp?From=1' title='Free Download - Java Web Application Framework'><b>WEB4J</b></a> |
  
  <a href='http://www.date4j.net/' title='Replacement for java.util.Date'><b>DATE4J</b></a> |

   <a href='../references/ReferencesAction-2.html' title='References'>Links</a>
   
  <form action='http://www.javapractices.com/search/SearchAction.do' method='get' class='search-form'>
   <input type='text' name='SearchTerms' value="" size=12 maxlength=50 class='search'>
   <input type='submit' value="Search">
  </form>
 
</div>

<P>



  

 






<p class="display-messages">

 

 

</p>


<div class="main-layout">
 
   

 




<div class='page-title'>Use Cascading Style Sheets</div>

<div class='main-body'>
 
<br><a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets</a> (CSS)
centralize decisions on how web pages are styled - fonts, colors, layouts,
and so on.
<p>Some advantages of using CSS :
<ul>
<li>
as usual, centralized policies greatly reduce maintenance effort</li>

<li>
many visual effects offered by CSS cannot be produced by simple HTML</li>

<li>
file download times improve slightly, since repeated markup is eliminated</li>

<li>
pleasing designs are easy to produce</li>
</ul>
Support for CSS varies among browsers. Some care must be taken that pages
render adequately in the most popular ones.
<p>Some recommendations on using CSS :
<ul>
<li>
name items at a high level of abstraction, without exposing implementation
details. For example, a good name for a style class is <tt>highlight</tt>,
and a bad name is <tt>bold-and-yellow</tt></li>

<li>
to maximize reuse, prefer external style sheets over styles defined in
a single HTML page</li>

<li>
name style sheets with a <tt>.css</tt> extension, to ensure they work with
tools which may incorrectly require that extension</li>

<li>
if using pseudo classes for links, use <tt>a:link</tt> and <tt>a:visited</tt>
as a pair</li>

<li>
for font sizes, usually prefer <tt>em</tt> or <tt>%</tt> (relative), over
<tt>ex</tt>
and <tt>px</tt> (absolute)</li>

<li>
the <tt>font-size</tt> styles of <tt>xx-small</tt>, <tt>x-small</tt>, and
so on, are not consistent across browers, and should likely be avoided.
It is a kind of absolute measure.</li>

<li>
when referring to specific fonts, always include a generic font family
to be used as an alternative : <tt>serif</tt>, <tt>sans-serif</tt>, <tt>monospace</tt></li>

<li>
some recommend that <tt>!important</tt> should be avoided</li>

<li>
favor techniques which minimize the amount of markup</li>

<li>
use the <a href="http://www.w3.org/TR/CSS21/cover.html#minitoc">CSS Specification</a>
as reference, and use the <a href="http://jigsaw.w3.org/css-validator/">CSS
Validator</a> to verify your work</li>
</ul>
Reminders :
<ul>
<li>
the <tt>LINK</tt> tag is placed in the <tt>HEAD</tt> tag</li>

<li>
a typical <tt>LINK</tt> : <tt>&lt;link rel="stylesheet" type="text/css"
href="styles.css" media="all"></tt></li>

<li>
<tt>.</tt> denotes a class</li>

<li>
<tt>#</tt> denotes an id</li>

<li>
<tt>:</tt> denotes a pseudo-class, as in <tt>a:visited</tt></li>

<li>
<tt>[]</tt> denotes attribute selectors</li>

<li>
according to the specification, class and id names are case sensitive</li>

<li>
element box = content area + padding + border + margin (in order from middle
outwards)</li>

<li>
the width of an item refers only to the content area, and not the whole
element box</li>

</ul>

<h3>Be Aware of Browser Caches</h3>
Browsers cache style sheets.
If an update to a web site includes <em>changes</em> to a style sheet, then the developer will often need to <em>manually</em> refresh the browser's cache, in order to see the updates (the specifics apparently depend on the browser). 
However, when deploying such an update, it's not acceptable to expect the end user to do the same thing.

<P>To ensure that all users see the updated version of a stylesheet, there's a simple workaround : just <em>rename</em> the style sheet.
Of course, related references need to reflect the new name as well.
This will force the browser to always load the updated version.


<h3>Example style sheet</h3>

<PRE>
/* Color scheme comes first. */
body {
   background-color: rgb(255,255,255);
}
a {
 color: rgb(0,100,26); 
}
a:hover {
  background-color:rgb(164,255,158); 
}
a:visited {
 color: rgb(0,150,26); 
}
.opening-quote{
  background-color:  rgb(85%, 85%, 85%);
  border-top: 1px solid rgb(50%,50%,50%);
  border-left: 5px solid rgb(50%,50%,50%);
  border-right: 5px solid rgb(50%,50%,50%);
  border-bottom: 1px solid rgb(50%,50%,50%);
}
img.photo {
 border-color: rgb(50%,50%,50%);
}
.highlight {
 background-color: #ffff66; 
}
.sidebar{
  background-color:  rgb(85%, 85%, 85%);
  border-top: 1px solid rgb(50%,50%,50%);
  border-left: 5px solid rgb(50%,50%,50%);
  border-right: 5px solid rgb(50%,50%,50%);
  border-bottom: 1px solid rgb(50%,50%,50%);
}

/* End of the color scheme. */



body {
  margin: 0; 
  padding:0;
  font: 1.0em Verdana, Arial, Helvetica, sans-serif;
}

a {
 font-weight: bold;
 text-decoration: none;
}

h2{
  font: bold 20px Verdana, Arial, Helvetica, sans-serif;
  border-bottom: 1px solid;
}

h3{
  font: bold 16px Verdana, Arial, Helvetica, sans-serif;
}

h4{
  font: bold 16px Verdana, Arial, Helvetica, sans-serif;
}

blockquote.abstract{
 padding: 0.3em;
}

ul {
 list-style-type: square;
}

tr { 
  vertical-align: top 
}

/* 
Tables used for user input.
*/
form.user-input table {
 background-color: rgb(83%, 83%, 83%);
 border-style: solid;
 border-width: 2px; 
 border-color: rgb(45%,45%,45%); 
 padding: 1.0em;
}
/* improves alignment of form controls */
form.user-input input {
 margin: 0;
}


/* 
REPORTS 
Here, reports are implemented with tables, and refer to any kind of listing.
*/
table.report {
 background-color: rgb(83%, 83%, 83%); 
 border-style: solid;
 border-width: 2px;
 border-color: rgb(45%,45%,45%); 
 border-collapse: collapse;
 empty-cells: show; 
 caption-side: bottom;
}

table.report td, th {
 /*white-space: nowrap;*/
 border: 1px ridge rgb(65%,65%,65%); 
 padding: 0.30em;
}

/* no underline for sorting links */
table.report th a {
  text-decoration: none;
}
table.report th img {
 padding: 0;
 margin: 0;
}

table.report tbody {
 border: 1px solid black;
}
/* 
Highlighting the row when the cursor hovers above it 
increases legibility. 
*/
table.report tr:hover {
  background-color: #FFFDE3;
}
table.report caption {
 font-weight: bold;
 text-align: center;
 padding: 0.5em;
}
table.report caption:after {
 content : " - ";
}
table.report caption:before {
 content : " - ";
}

/* 
MESSAGES of various kinds.
*/
.message {
 font-weight: bolder;  
}
.warning {
 font-weight: bolder;  
}
.error {
 font-weight: bolder;  
 color: rgb(255,0,0);
}
p.display-messages {
 text-align: center;
}


img.photo {
 margin-top:1.0em;
 margin-bottom:1.0em;
 margin-left:1.0em;
 margin-right:1.0em;
 border-style: solid;
 border-width: 2px;
}

img.photo-home {
 margin: 0;
 border-style: solid;
 border-width: 2px;
 float: left; 
}

/* The top banner */
#header{
 text-align:center;
 padding-top:1.70em;
}



.loud {
 font-size: 150%;
 padding: 1.0em;
}


#bodycontent{
  margin-left: 0px;
  margin-right: 0px;
}

#nav-menu{
  padding-top:18px;
  padding-left:15px;
  width:120px;
  float:left;
  display:block;
} 

#nav-menu ul {
  list-style-type: none;
  display:block;
  padding: 0;
  margin: 0;
}

#nav-menu li {
  text-decoration: none;
  display:block;
}

#nav-menu li a {
  padding-left: 7px;
  padding-top: 6px;
  height: 22px;
  /* width: 113px; */
  width: 70px;
  display: block;
  text-decoration: none;
  font-weight: bold;
}


/* Search form in menu */
#nav-menu li form {
  padding-left: 7px;
  padding-top: 6px;
  height: 22px;
  width: 113px;
  font-weight: bold;
}


#content{
  /* margin-left: 135px; */
  margin-left: 100px;
  padding-left:10px; 
  padding-right:10px; 
  padding-top:1px; 
}

#contentdisabled{
  margin: 10px;
  padding:10px;
}

.maincopy a:hover {
  text-decoration: underline;
}

#textcontent{
  height:100%;
  padding-left:0;
  padding-right:15px;
}

div.author {
 font-style: italic;
 padding-top: 0em;
 margin-top: 0.25em;
 text-align: right;
}



.opening-quote{
  margin: 10px;
  padding: 10px;
}

.sidebar{
  margin: 10px;
  padding: 10px;
}

#footer{
  text-align:center;
  height:24px;
  padding-top: 10px;
  padding-left: 0px;
  font: 11px Verdana, Arial, Helvetica, sans-serif;
  padding-right: 10px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
}

.small-graphic{
 float:left;
 margin-right:0.2em;
}

/* sometimes footer is too high on page */
div.spacer {
  height: 14.0em;
}
div.smallspacer {
  height: 7.0em;
}
div.bigspacer {
  height: 30.0em;
}

/* Styles for print. */
@media print {
 * {
  color: black !important;
  background: white !important;
 }
 body {
  font-family: "Times New Roman", serif;
  font-size: 12pt;
 }
 a {
  text-decoration: none;
 }
 img.photo {
  display: none;
 }
 div#nav-menu{
  display: none;
 }
 div#header{
  display: none;
 }
}
</PRE>

<br>

</div>





<div class='topic-section'>Would you use this technique?</div>
<div class='main-body'>
  
  <form action="http://www.javapractices.com/vote/AddVoteAction.do" method='post'>
    Yes<input type='radio' name='Choice' value='Y' >
    &nbsp;&nbsp;No<input type='radio' name='Choice' value='N'>
    &nbsp;&nbsp;Undecided<input type='radio' name='Choice' value="?" >
    &nbsp;&nbsp;<input type=submit value="Vote" >
    <input type='hidden' name='Operation' value='Apply'>
    <input type='hidden' name='TopicId' value='202'>
  </form>
</div>

<div style='height:10.0em;'></div>

 
 
</div>

  

 





<div align='center' class='legalese'>  
&copy; 2011 Hirondelle Systems |
<a href='../source/SourceAction-2.html'><b>Source Code</b></a><IMG class='no-margin' SRC="../images/goldstar.gif" ALT=""> |
<a href="mailto:webmaster@javapractices.com">Contact</a> |
<a href="http://creativecommons.org/licenses/by-nc-sa/1.0/">License</a> |
<a href='../apps/cjp.rss'>RSS</a>
<!-- ukey="2AC36CD2" -->
<!-- ckey="16DF3D87" -->
<br>

 Individual code snippets can be used under this <a href='../LICENSE.txt'>BSD license</a> - Last updated on June 6, 2010.<br>
 Over 150,000 unique IPs last month - <span title='Java Practices 2.6.5, Mon May 16 00:00:00 EDT 2011'>Built with</span> <a href='http://www.web4j.com/'>WEB4J</a>.<br>
 - In Memoriam : Bill Dirani -
</div>

<script src="../../www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2633428-1";
urchinTracker();
</script>



</body>

<!-- Mirrored from www.javapractices.com/topic/TopicAction.do?Id=202 by HTTrack Website Copier/3.x [XR&CO'2010], Sun, 12 Jun 2011 17:28:07 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8"><!-- /Added by HTTrack -->
</html>
